<template>
  <view class="calendar_containter">
    <view class="mingzhu">
      <view class="mingzhu-left">
        <image
          class="bagua-img"
          mode="heightFix"
          src="../../../../static/images/bgc.jpeg"
        />
      </view>
      <view class="mingzhu-right">
        <view class="mingzhu-box">
          <view class="mingzhu-box-item">
            <view class="mingzhu-title">姓名</view>
            <view class="mingzhu-content">{{ baziResult.userName }}</view>
          </view>
          <view class="mingzhu-box-item">
            <view class="mingzhu-title">性别</view>
            <view class="mingzhu-content">{{ baziResult.sex }}</view>
          </view>
        </view>
        <view class="mingzhu-box">
          <view class="mingzhu-title">农历</view>
          <view class="mingzhu-content">{{ baziResult.lunarDate }}</view>
        </view>
        <view class="mingzhu-box">
          <view class="mingzhu-title">阳历</view>
          <view class="mingzhu-content">{{ baziResult.birthDay }}</view>
        </view>
        <view class="mingzhu-box">
          <view class="mingzhu-title">地区</view>
          <view class="mingzhu-content">{{ baziResult.area }}</view>
        </view>
        <view
          class="mingzhu-box"
          v-if="baziResult.trueSolarTime && baziResult.trueSolarTime != ''"
        >
          <view class="mingzhu-title">真太阳时</view>
          <view class="mingzhu-content">{{ baziResult.trueSolarTime }}</view>
        </view>
      </view>
    </view>
    <view class="benming-container">
      <view class="benming-container-box">本命{{ baziResult.benmingfo }}</view>
      <view class="benming-container-box">
        <view class="benming-container-item">
          <view class="benming_item">生肖{{ baziResult.chineseZodiac }}</view>
          <view class="benming_item">{{ baziResult.zodiac }}</view>
        </view>
        <view class="benming-divide"></view>
        <view class="benming-container-item">
          <view class="benming_item">胎元{{ baziResult.taiYuan }}</view>
          <view class="benming_item">命宫{{ baziResult.mingGong }}</view>
        </view>
        <view class="benming-divide"></view>
        <view class="benming-container-item">
          <view class="benming_item"
            >冲{{ baziResult.duiChong }}煞{{ baziResult.sanSha }}</view
          >
          <view class="benming_item">文昌位{{ baziResult.wenChangWei }}</view>
        </view>
      </view>
    </view>
    <view>
      <view class="type-arr">
        <view
          v-for="(item, index) in itemArr"
          :key="index"
          @click="change(item, index)"
          class="type-item"
          :class="[itemIndex == index ? 'active' : '']"
          >{{ item }}</view
        >
      </view>
    </view>
  </view>
</template>
<script>
import { getMallListApi } from "@/http/api";
export default {
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      itemArr: ["基础命盘", "大运流年", "命盘解读"],
      itemIndex: 0,
      baziResult: this.result,
      shiershegnxiao: [
        "鼠",
        "牛",
        "虎",
        "兔",
        "龙",
        "蛇",
        "马",
        "羊",
        "猴",
        "鸡",
        "狗",
        "猪",
      ],
      shiershegnxiaoPinYin: [
        "shu",
        "niu",
        "hu",
        "tu",
        "long",
        "she",
        "ma",
        "yang",
        "hou",
        "ji",
        "gou",
        "zhu",
      ],
    };
  },
  computed: {
    shengxiaoIndex: function () {
      return this.shiershegnxiao.findIndex((ele) => ele == this.baziResult.chineseZodiac);
    },
  },
  methods: {
    change(item, index) {
      if (index == this.itemIndex) return;
      this.itemIndex = index;
      this.$emit("itemClick", { item, index });
    },
    adTarget(item) {
      window.location.href = item.skipLinks;
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar_containter {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #c5a680 0%, #9e8465 100%);
  padding-bottom: 40rpx;
}
.mingzhu {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  font-size: 24rpx;
  line-height: 40rpx;
  color: #fff;
  padding-bottom: 30rpx;
}
.mingzhu-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.bagua-img {
  height: 236rpx;
}
.bagua-text {
}
.mingzhu-right {
  display: flex;
  flex-direction: column;
}
.mingzhu-box {
  display: flex;
  flex-direction: row;
  padding: 10rpx 0;
}

.mingzhu-box-item {
  display: flex;
  flex-direction: row;
  flex: 1 0;
}

.mingzhu-title {
  white-space: nowrap;
  background-color: #4b240d;
  padding: 0 12rpx;

  letter-spacing: 4rpx;
}

.mingzhu-content {
  margin: 0 24rpx 0 6rpx;
}

.benming-container {
  width: 618rpx;
  height: 221rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 8rpx #666;
  color: #c5a680;
  background-color: #fff;
  font-size: 24rpx;
  line-height: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto 40rpx;
}
.benming-container-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #4b240d;
}
.astro_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benming-container-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
  font-size: 24rpx;
}
.benming-divide {
  width: 2rpx;
  height: 64rpx;
  background-color: #c9c9c9;
}

.benming_item {
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}
.type-arr {
  width: 618rpx;
  height: 50rpx;
  background-color: #fff;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.type-item {
  color: #787878;
  font-weight: bold;
  width: 33%;
  height: 100%;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.active {
  color: #ffffff;
  background-color: #4b240d;
}
</style>
